<template>
  <div class="Login">

    <div>
      <img src="../assets/title.webp" alt="" />
      <p>开始准备好好吃饭</p>
    </div>

    <div class="form">
      <div>
        <p>&nbsp;用户名</p>
        <input type="text" placeholder="请输入用户名" value="" v-model="uname" @focus="myinput"/>
        <div></div>
      </div>

      <div></div>

      <div>
        <p>&nbsp;密码</p>
        <input :type="passwordType" name="" id="" placeholder="请输入密码" v-model="pwd" @focus="myinput"/>
        <img src="../assets/eye_0.png" alt="" @click="changePassward" v-if="a">
        <img src="../assets/eye_1.png" alt="" @click="changePassward" v-else>
        <div></div>
      </div>

      <div v-html="txt"></div>

      <button @click="myclick">登录</button>

      <div>
         <p @click="pmyclick">用户注册</p>
      </div>
    </div>
    <div>
        <div></div><span>其他登录方式</span><div></div>
        <div class="img">

          <img src="../assets/1.png" alt="">
          <img src="../assets/3.png" alt="">
          <img src="../assets/5.png" alt="">                   
              
              
        </div>
        <div class="zi">
        <div>QQ</div>
        <div>微信</div>
        <div>微博</div>
        </div>
    </div>
  </div>
</template>
<script>
export default {
  data(){
     return {
       uname:'',
       pwd:'',
       passwordType:'password',
       a:'true',
       txt:'',
    }
  },
  methods: {
    //点击注册
    myclick(){
      this.axios.post('/users/log',`uname=${this.uname}&upwd=${this.pwd}`).then(result=>{
        if(result.data.code == 200){
          this.$router.push('/cookHome');
          sessionStorage.setItem('name',this.uname);
          sessionStorage.setItem('uid',result.data.uid);
          sessionStorage.setItem('like',result.data.like);
          sessionStorage.setItem('upic',result.data.pic);
        }else{
          this.txt = `<span style="font-size: 12px;color: red;">用户名或密码不正确</span>`;
        }
      })
    },
    pmyclick(){
      this.$router.push('/register');
    },
    changePassward(){
      this.a = !this.a;
      this.passwordType = this.passwordType==='password'?'text':'password';
},
myinput(){
        this.txt = '';
     },
  }
}
</script>
<style>
.Login {
  width: 80%;
  margin: 0 auto;
}
.Login>div:nth-child(1),.Login>div:nth-child(3){
    text-align: center;
}
.Login>div>img {
  display: block;
  width: 80px;
  margin:auto;
  margin-top: 60px;
}
.Login>div>p {
  font-size:24px;
  color: #656565;
  margin-top:20px;
}
.Login>div:nth-child(3)>.img>img {
    width: 30px;
}
.Login>div:nth-child(3)>.img {
    display: flex;
    justify-content: space-between;
    width: 270px;
    margin: 0 auto;
    margin-top: 30px;
}
.Login>div:nth-child(3)>.zi {
    display: flex;
    justify-content: space-between;
    width: 265px;
    margin: 0 auto;
    margin-top: 5px;
    font-size: 12px;
}
.Login button{
    width: 100%;
    background-color: #ff3333;
    border-radius: 30px;
    line-height: 35px;
    margin-top: 5px;
    border: 0;
    color: white;
}
.Login>.form {
    margin-top: 40px;
}
.Login>.form p{
  font-size: 0.5em;
}
.Login>.form input {
  margin-top:10px;
  height: 20px;
  border:none
}
.Login>.form>div:nth-child(3)>img {
  float: right;
  width: 20px;
  margin-top: 8px;
  vertical-align: middle;
}
.Login>div:nth-child(3){
    margin-top: 70px;
}
.Login>div:nth-child(3)>span{
    font-size: 14px;
}
.Login>div:nth-child(3)>div:nth-child(1),.Login>div:nth-child(3)>div:nth-child(3){
    height: 0;
    border-top: 1px solid rgba(0, 0, 0, 0.258);
    width: 70px;
    display: inline-block;
    vertical-align: middle;
}
.Login>.form>div:nth-child(6)>p {
  text-align: center;
    font-size: 16px;
}
.Login>.form>div:nth-child(6) {
    margin-top: 30px;
}
.Login>.form>div:nth-child(2),.Login>.form>div:nth-child(4) {
  height: 20px;
}
.Login>.form>div:nth-child(1)>div,.Login>.form>div:nth-child(3)>div{
  margin-top: 5px;
  height: 0;
  border-top: 1px solid #f0f0f0;
}
input::-webkit-input-placeholder { 
/* WebKit browsers */ 
color: #ccc; 
} 
input:-moz-placeholder { 
/* Mozilla Firefox 4 to 18 */ 
color: #ccc; 
} 
input::-moz-placeholder { 
/* Mozilla Firefox 19+ */ 
color: #ccc; 
} 
input:-ms-input-placeholder { 
/* Internet Explorer 10+ */ 
color: #ccc; 
}
</style>